{extend name="public/base" /}
{block name="pjax_container"}
<?php
    $titleTypeName = '事件分类编辑/添加';
?>
<style>
    tr>th,
    td {
        text-align: center;
    }

    .btn-group-xs>.btn,
    .btn-xs {
        padding: 5px;
        margin: 0 5px;
    }

    .tab-content{
        border-bottom:none;
    }

    .content-header>.breadcrumb>li {
        color: #999;
    }

    .content-header>.breadcrumb>.active {
        color: #666;
    }

    .content-header {
        height: 51px;

    }

    .btn-primary {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 5px 10px;
    }

    .box-primary {
        border-top-color: #ecf0f5 !important;
        border-top-width: 16px;

    }

    .btn-primary:hover {
        background-color: #1890FF;
        color: #fff;
        border: none;
        opacity: .9;
        border-radius: 6px !important;
    }

    .delete-one {
        background-color: ff4141 !important;
        margin-left: 15px;
        border-radius: 6px;
    }

    .sreachs {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 15px;
    }

    .type_explode {
        color: #fff;
        background-color: #d9534f;
        border-radius: 6px;
        border: none;
    }
       .nav-tabs-custom {
        margin-top: 16px;
    }



        .modal-content {
        margin-top: 150px;
        width: 600px;
        height: 690px;

    }

    .modal-body {
        padding: 27px;
        width: 856px;
        height: 570px;
        display: flex;
    }

    .modal-right {
        flex: 1;
        border: 1px solid #eee;
        margin-left: 30px;
    }

    .modal-left {
        height: 100%;
    }

    .modal-right>h4 {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .form-control {
        border-radius: 6px;
    }

    .table-body {
        width: 540px;
        height: 462px;
        border-radius: 6px;
        background-color: #eee;
    }

    .table-left {
        margin-right: 2%;
        width: 49%;
        height: 100%;
        float: left;
        border: 1px solid #eee;
        background-color: #fff;
    }

    .table-right,
    .table-right2 {
        width: 49%;
        height: 100%;
        border: 1px solid #eee;
        float: left;
        padding-top: 10px;
        background-color: #fff;
    }

</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>积分管理</li>
        <li>事件库管理</li>
        <li>事件库分类</li>
        <li class="active">{$titleTypeName}</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" method="POST" action="/{$Think.MODULE_NAME}/{$Think.CONTROLLER_NAME}/{$Think.ACTION_NAME}" onsubmit="return false" >
                <input type="hidden" name="id" value="{$info.id|default=0}" />
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="pull-right"><a href="javascript:history.back(-1)" class="btn btn-sm" style="padding:10px 2px;"><i class="fa fa-list"></i> 返回</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            {include file="form/input" title="名称" name="name"/}
                            <div class="form-group">
                                <label class="col-sm-2 control-label">上级分类:</label>
                                <div class="col-sm-4">
                                    <input style="border-radius: 6px;" class="form-control pid_name" {if condition="isset($info.pid) && $info.pid==0"} disabled value="已是顶级分类"{else}value="{$info.pid_name??''}"{/if}  name="pid_name"  placeholder="上级分类">
                                    <input type="hidden" name="pid" class="pid" value="{$info.pid??''}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-7">
                            <div class="btn-group pull-right">
                                <button type="submit" class="btn btn-info pull-right submits" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; 提交">提交</button>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
</section>
<script type="application/javascript">
    $(document).ready(function () {
        /*ajax页面加载icheck，有该控件的页面才需要*/
        $(".select2").select2({language:"zh-CN"});

    })
</script>

<!-- 弹框样式引入 -->
<link rel="stylesheet" href="__STATIC__/global/an_tree_css/an_tree_css.css">
<!-- Modal 弹出层重写 事件分类选择  -->
<div class="modal fade myModal_things_type" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="height: 633px;width: 535px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel_things">事件分类选择</h4>
            </div>
            <div class="modal-body" style="width: 504px;">
                <div class="modal-left" style="width: 480px;">
                    <div class="modal-left-title" style="margin-bottom: 20px;">
                        <div class="input-group">
                            <input name="search_user_name" type="text" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <button class="btn btn-info search_btn" type="button"
                                        style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="input-group table-body" style="width: 480px;">
                        <div class="table-left" style="width: 100%">
                            <div class="an_tree search_hide">

                            </div>
                            <div class="search_show" style="display: flex;  flex-direction: column;padding: 20px 10px;">

                            </div>
                        </div>
                       
                    </div>
                </div>

            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary popups_submit">确认</button>
            </div> -->
        </div>
    </div>
    <!-- <div class="content_tips">
        <p>事件分类：<span>工作类事件/ 日常工作类事件</span></p>
        <p>分值范围：<span>A分:0 ~ 0 B分:100 ~ 200 产值:0 ~ 0</span></p>
        <p>事件属性：<span>专审事件 计件事件</span></p>
        <p><p>备注信息：</p><p><span>暂无备注信息</span></p></p>
    </div> -->
</div>
<!-- 单选弹窗操作 事件分类选择  -->
<script>
    var now_item_name;//名字输入框
    var now_item_id;//id输入框
    //当弹窗关闭时执行重置弹窗
    $('.myModal_things_type').on('hidden.bs.modal', function () {
        // 执行一些动作...重置弹窗
        $(".an_tree_list .an_list_con").html("");
        $(".tree_txt_active").removeClass("tree_txt_active");
        $(".an_tree_pack").hide();
        $(".an_tree .fa").removeClass("fa-caret-down").addClass("fa-caret-right");
        $(".myModal_things_type input[name='search_user_name']").val("");
    });
    // 事件分类选择
    $('body').on('focus','.pid_name', function () {
        $('.myModal_things_type').modal('show');
        // now_item_name = $(this);
        // now_item_id = $(this).siblings(".things_type_check_id");//节点
    });
</script>
<!-- 树结构js操作 事件分类选择  -->
<script>
    $(".myModal_things_type .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    $(".myModal_things_type").on("click", ".an_tree_txt", function () {
        $('.myModal_things_type').modal('hide');
        var now_thing_id = {:input('id')?? '0'};
        if(now_thing_id == $(this).attr("data_id")){
            layui.layer.msg("上级分类不能为自己");
        }else{
            $(".pid_name").val($(this).html());
            $(".pid").val($(this).attr("data_id"));
        }
    });
    $(".myModal_things_type").on("click", ".search_btn", function () {
        var item = $(".myModal_things_type .an_tree_txt");
        var search_name = $(".myModal_things_type input[name='search_user_name']").val();
        $(".myModal_things_type .search_show").html("");
        if(search_name == ""){
            $(".myModal_things_type .search_hide").show();
            $(".myModal_things_type .search_show").removeClass("an_tree");
        }else{
            $(".myModal_things_type .search_hide").hide();
            $(".myModal_things_type .search_show").show();
            var content = "";
            for (let i = 0; i < item.length; i++) {
                var name = item.eq(i).html();
                if (name.indexOf(search_name) != -1) {
                    content += item.eq(i).prop("outerHTML");
                }
            }
            $(".myModal_things_type .search_show").append(content)
        }
    })
</script>
<!-- 递归填充目录 事件分类选择  -->
<script>
    var eventList;
    $.ajax({
        type: 'get',
        url: "{:url('base/event_pid_list')}",
        dataType:"json",
        async: false,
        success: function (data) {
            eventList = JSON.parse(data);
        }
    })
    var an_tree = ergodic(eventList);
    $(".myModal_things_type .an_tree").append(an_tree);
    function ergodic(data) {
        var content = '';
        // console.log(data);
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.name + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.name + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }
</script>


{/block}
